<template>
    <div class="user-page" v-if="user">
        <!-- 头像昵称 -->
        <div class="user-page-head">
            <div class="top">
                <van-image round fit="cover" :src="user.avatar" />
                <div class="name">
                    <p>{{ user.account }}</p>
                    <p>
                        <van-icon name="edit" />
                    </p>
                </div>
            </div>
            <van-row>
                <van-col span="6">
                    <p>{{ user.collectionNumber }}</p>
                    <p>收藏</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user.likeNumber }}</p>
                    <p>关注</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user.score }}</p>
                    <p>积分</p>
                </van-col>
                <van-col span="6">
                    <p>{{ user.couponNumber }}</p>
                    <p>优惠券</p>
                </van-col>
            </van-row>
        </div>
        <!-- 订单 -->
        <div class="user-page-order">
            <div class="head">
                <h3>药品订单</h3>
                <router-link to="/order">全部订单
                    <van-icon name="arrow" />
                </router-link>
            </div>
            <van-row>
                <van-col span="6">
                    <van-badge :content="user.orderInfo.paidNumber || ''">
                        <cp-icon name="user-paid" />
                    </van-badge>
                    <p>待付款</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user.orderInfo.receivedNumber || ''">
                        <cp-icon name="user-shipped" />
                    </van-badge>
                    <p>待发货</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user.orderInfo.shippedNumber || ''">
                        <cp-icon name="user-received" />
                    </van-badge>
                    <p>待收货</p>
                </van-col>
                <van-col span="6">
                    <van-badge :content="user.orderInfo.finishedNumber || ''">
                        <cp-icon name="user-finished" />
                    </van-badge>
                    <p>已完成</p>
                </van-col>
            </van-row>
        </div>
        <!-- 快捷工具 -->
        <div class="user-page-group">
            <h3>快捷工具</h3>
            <!-- is-link 是否展示右侧箭头并开启点击反馈 -->
            <!-- border	是否显示内边框 -->
            <van-cell v-for="(item, i) in tools" :key="i" :title="item.label" is-link :to="item.path" :border="false">
                <template #icon>
                    <cp-icon name="1user-tool-0${i+1}"></cp-icon>
                </template>
            </van-cell>
        </div>
        <a class="logout" href="javascript:;" @click="logout">退出登录</a>
    </div>
</template>

<script setup lang='ts'>
import { getUserInfo } from '@/services/use'
import type { UserInfo } from '@/types/user'
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { Dialog } from 'vant'

// 获取用户信息且渲染
const user = ref<UserInfo>()
onMounted(async () => {
    const res = await getUserInfo()
    user.value = res.data
})

// 初始快捷工具数据
const tools = [
    { label: '我的问诊', path: '/user/consult' },
    { label: '我的处方', path: '/' },
    { label: '家庭档案', path: '/user/patient' },
    { label: '地址管理', path: '/user/address' },
    { label: '我的评价', path: '/' },
    { label: '官方客服', path: '/' },
    { label: '设置', path: '/' },
]

const store = useUserStore()
const router = useRouter()
// 退出登录
const logout = async () => {
    await Dialog.confirm({
        title: '温馨提示',
        message: '您确认要退出吗？',
        cancelButtonText: '取消',
        confirmButtonText: '确认'
    })
    // 点击确认才会执行下面代码
    store.delUser()
    router.push('/login')
}

</script>

<style lang="scss" scoped>
.user-page {
    background-color: var(--cp-bg);
    min-height: calc(100vh - 50px);
    padding: 0 15px 65px;

    // 头部
    &-head {
        height: 200px;
        background: linear-gradient(180deg, rgba(44, 181, 165, 0.46), rgba(44, 181, 165, 0));
        margin: 0 -15px;
        padding: 0 15px;

        .top {
            display: flex;
            padding-top: 50px;
            align-items: center;

            .van-image {
                width: 70px;
                height: 70px;
            }

            .name {
                padding-left: 10px;

                p {
                    &:first-child {
                        font-size: 18px;
                        font-weight: 500;
                    }

                    &:last-child {
                        margin-top: 10px;
                        color: var(--cp-primary);
                        font-size: 16px;
                    }
                }
            }
        }

        .van-row {
            margin: 0 -15px;
            padding-top: 15px;

            p {
                text-align: center;

                &:first-child {
                    font-size: 18px;
                    font-weight: 500;
                }

                &:last-child {
                    color: var(--cp-dark);
                    font-size: 12px;
                    padding-top: 4px;
                }
            }
        }
    }

    // 订单
    &-order {
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 15px;
        padding-bottom: 15px;

        .head {
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            padding: 0 15px;

            a {
                color: var(--cp-tip);
            }
        }

        .van-col {
            text-align: center;

            .cp-icon {
                font-size: 28px;
            }

            p {
                font-size: 12px;
                padding-top: 4px;
            }
        }
    }

    // 分组
    &-group {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;

        h3 {
            padding-left: 16px;
            line-height: 44px;
        }

        .van-cell {
            align-items: center;
        }

        .cp-icon {
            font-size: 17px;
            margin-right: 10px;
        }
    }

    .logout {
        display: block;
        margin: 20px auto;
        width: 100px;
        text-align: center;
        color: var(--cp-price);
    }
}
</style>
